<template>
	<view>
		<view class="header-section">
			<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
				<uni-col :span="8" style="text-align: left;">
					<uni-icons type="back" size="30" @click="goBack"></uni-icons>
				</uni-col>
				<uni-col :span="8" style="text-align: center;">
					<text class="text-xl text-bold">预约信息</text>
				</uni-col>
				<uni-col :span="8" style="text-align: right;">
					<!-- <uni-icons type="search" size="30" class="search-icon"></uni-icons> -->
				</uni-col>
			</uni-row>
		</view>
		<view class="appointment-section">
			<view v-if="appointments.length">
				<view v-for="appointment in appointments" :key="appointment.appointmentId" >
					<uni-card class="appointment-item">
					      <view class="content">
					        <text class="service-name">服务名称: {{ appointment.serviceName }}</text>
					        <text class="description">描述: {{ appointment.description }}</text>
					        <text class="price">价格: {{ appointment.servicePrice }}</text>
					        <text class="time">时间: {{ appointment.appointmentTime }}</text>
					        <text class="status">状态: {{ appointment.serviceStatus }}</text>
					      </view>
					    </uni-card>
				</view>
			</view>
			<view v-else>
				<text>加载中...</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAppointmentByUserId
	} from '../../../api/appointment'; // 传入用户Id即可获取数据

	export default {
		data() {
			return {
				gutter: 0,
				nvueWidth: 730,
				userId: null, // 存储用户Id
				appointments: [], // 存储预约信息
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async fetchUserId() {
				try {
					const res = await this.$store.dispatch('GetInfo');
					console.log(res);
					if (res.appUser.userName) {
						this.userId = res.appUser.userId;
						this.fetchAppointments();
					}
				} catch (error) {
					console.error('获取用户Id失败:', error);
				}
			},
			async fetchAppointments() {
				try {
					const response = await getAppointmentByUserId(this.userId);
					if (response && response.code === 200) {
						this.appointments = response.data;
					} else {
						console.error('获取预约信息失败:', response.message);
					}
				} catch (error) {
					console.error('获取预约信息时发生错误:', error);
				}
			}
		},
		onLoad() {
			this.fetchUserId(); // 页面加载时获取用户Id并获取预约信息
		}
	};
</script>

<style>
	.header-section {
		padding: 15px;
		background-color: #ffcbb2;
	}

	.demo-uni-row {
		padding-bottom: 5px;
		padding-top: 5px;
		display: block;
	}

	.appointment-section {
		padding: 15px;
		background-color: #fff;
	}

	.appointment-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		border: solid black;
		/* 添加外边距以保持间距 */
	}
	.content {
	  display: flex;
	  flex-direction: column;
	}
</style>